<!--
 * @Author: your name
 * @Date: 2021-08-17 10:29:01
 * @LastEditTime: 2021-08-17 18:01:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sks-quote-web\src\views\system\user\profile\userInfo.vue
-->
<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="用户昵称" prop="nickName">
      <el-input v-model="user.nickName" />
    </el-form-item>
    <el-form-item label="手机号码" prop="phonenumber">
      <el-input v-model="user.phonenumber" maxlength="11" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email" maxlength="50" />
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="user.sex">
        <el-radio label="0">男</el-radio>
        <el-radio label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="上传照片" prop="imgUrl">
      <el-upload
        id="upload1"
        action="#"
        :http-request="httpRequest"
        list-type="picture-card"
        accept="image/png,image/gif,image/jpg,image/jpeg"
        :on-remove="handleRemove"
        :before-upload="handledBeforeUpload"
        :file-list="fileList"
        :limit="1"
        :on-exceed="allowImgsNum"
      >
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import userAvatar from "./userAvatar";
import { updateUserProfile, getImgUrl } from "@/api/system/user";

export default {
  props: {
    user: {
      type: Object,
    },
  },
  components: { userAvatar },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileList: [],
      ruleForm: { imgUrl: "" },
      // 表单校验
      rules: {
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //图片上传
    handleRemove(file, fileList) {
   
    },
    httpRequest(file) {
   
      let fd = new FormData();
     
      fd.append("file", file.file);
      getImgUrl(fd).then((res) => {
        this.dialogImageUrl = res.url;
        this.user.logUrl = res.url;
      
        this.dialogVisible = true;
      });
    },
    handledBeforeUpload(file) {
   
      //
      let isImg = true;
      const isSize = new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = function () {
          resolve(img);
        };
        img.src = URL.createObjectURL(file);
      }).then(
        (res) => {
          let uploadId = document.getElementById("upload1");
          let liDom = uploadId.querySelector(
            ".el-upload-list--picture-card"
          ).firstChild;
          let div = uploadId.querySelector(".el-upload--picture-card");
          let scale = 150 / res.height;
          let width = res.width * scale;
          liDom.style.width = width + "px";
          return file;
        },
        (err) => {
          return Promise.reject();
        }
      );
      return isImg && isSize;
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    allowImgsNum(files, fileList) {
      this.$message({
        message: "只能上传一张图片哟！",
        type: "error",
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateUserProfile(this.user).then((response) => {
            this.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/index" });
    },
  },
};
</script>
